<template>

  <div class="rzcontent">
    <!--<el-row v-if="binfo.sign_status==1" style="height: 30px; background-color: #ef9572; width: 100%; color: #fff; text-align: center; line-height: 30px; font-size: 12px;">签约完成</el-row>-->
    <div v-if="binfo.sign_status==1"
         style="height: 40px; background-color: #16d655; width: 100%; color: #fff; text-align: center; line-height: 40px; font-size: 16px;">
      签约完成
    </div>
    <el-alert
      v-show="isIe"
      title="为了更好的体验推荐使用火狐浏览器或者谷歌浏览器打开此页面"
      :closable="false"
      show-icon
      type="warning">
    </el-alert>
    <el-form ref="form" label-width="80px">
      <el-divider content-position="left">用户基本信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="证件类型:">
            身份证
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码:">
            {{binfo.id_card}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名:">
            {{binfo.name}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别:">
            <div v-if="binfo.sign_status!=1">
              <el-radio v-model="msex" @change="changesex" label="1">男</el-radio>
              <el-radio v-model="msex" @change="changesex" label="2">女</el-radio>
            </div>
            <div v-else>
              {{msex ==1?'男':'女'}}
            </div>

            <!--{{binfo.sex_str}}-->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号:">
            {{binfo.phone}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行名称:">
            {{binfo.bank_name}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行卡号:">
            {{binfo.bank_account}}
          </el-form-item>
        </el-col>

      </el-row>

      <el-divider content-position="left">身份证信息上传</el-divider>
      <el-row>
        <el-col :span="12">
          <div class="cardsviews">
            <div class="cardimgs">
              <img v-show="!imgsUrl.zmurl" src="../../assets/img/zcard.png"/>
              <img v-show="imgsUrl.zmurl" :src="imgsUrl.zmurl"/>
              <wxupload choosetype="1" v-if="binfo.sign_status!=1 && canopt"
                        @uploadsucess="uploadsucess"></wxupload>
            </div>
            <div class="tipinfo">请上传身份证人像面信息</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="cardsviews">
            <div class="cardimgs">
              <img v-show="imgsUrl.fmurl" :src="imgsUrl.fmurl"/>
              <img v-show="!imgsUrl.fmurl" src="../../assets/img/fcard.png"/>
              <wxupload choosetype="2" v-if="binfo.sign_status!=1 && canopt"
                        @uploadsucess="uploadsucess"></wxupload>
            </div>
            <div class="tipinfo">请上传身份证国徽面信息</div>
          </div>
        </el-col>

      </el-row>
      <!--v-if="productorInfo.productId == 7 || productorInfo.productId == 10"-->
      <div
        v-if="(productorInfo.productId == 7 || productorInfo.productId == 10) && appidval != 'C0B5F57CBF5EE84E3FF800190CE16B09' && appidval!='B368C6B3B663B08DE84452C1E6F96FF7'">

        <el-divider content-position="left">工商截图上传</el-divider>
        <el-row>
          <el-col :span="12">
            <div class="cardsviews">
              <div class="cardimgs">
                <img v-show="!imgsUrl.gsurl" src="../../assets/img/gscard.png"/>
                <img v-show="imgsUrl.gsurl" :src="imgsUrl.gsurl"/>
                <wxupload ref="gsPcupload" v-if="binfo.sign_status!=1 && canopt" choosetype="3"
                          @uploadsucess="uploadsucess"></wxupload>
              </div>
              <div class="tipinfo">请上传工商截图</div>

            </div>
          </el-col>
          <el-col :span="12">
            <div class="proimg">
              <h3>
                上传说明
              </h3>
              <p>请选择适合的手机系统扫描下方二维码下载
                <b>“登记注册身份验证”</b>完成登记注册身份验证<label @click="viewPro">查看详细说明>></label></p>
              <img src="../../assets/img/apppro.jpg"/>
            </div>


          </el-col>

        </el-row>
      </div>

      <el-row>
        <div class="optbtns" v-show="!binfo.sign_status">
          <el-button type="info" @click="openContractMb()" v-show="(appidval!='C0B5F57CBF5EE84E3FF800190CE16B09' && appidval!='B368C6B3B663B08DE84452C1E6F96FF7')">
            查看合同
          </el-button>
          <el-button type="primary" @click="goSign()" v-if="binfo.sign_status!=1">提交信息</el-button>
        </div>
        <div class="optbtns" v-show="binfo.sign_status">
          <el-button type="info" @click="openContract()" v-show="(appidval!='C0B5F57CBF5EE84E3FF800190CE16B09' && appidval!='B368C6B3B663B08DE84452C1E6F96FF7')">
            查看合同
          </el-button>

        </div>

      </el-row>
    </el-form>


  </div>
</template>

<script>

  // import authperson from './basicAuthPerson'
  import {HOST, IMG_URL} from '@/constants'
  import axios from 'axios'

  export default {
    name: "renzheng",
    data() {
      return {
        burl: HOST,
        msex: '2',
        isIe: false,
        isqz: 0,
        productorInfo: {},
        binfo: {},
        imgsUrl: {
          zmurl: '',
          fmurl: '',
          gsurl: '',
        },
        islaodings: null,
        ossupUrl: 'https://renshe.oss-cn-beijing.aliyuncs.com/',
        return_url: '',
        contractId: '',  //合同id
        appidval: '',
        canopt: false
      }
    },
    mounted() {
      if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
        this.isIe = true;
      }
      this.isqz = this.$route.query.isqz || 1
      window.appid = this.$route.query.appKey || ''
      this.appidval = this.$route.query.appKey || ''
      this.return_url = this.$route.query.return_url || ''

      this.getinfo();

    },
    // components:{authperson},
    methods: {
      openContractMb(){
        var contractTemp = ''
        if(this.productorInfo.productId == 7 || this.productorInfo.productId == 10){//创业宝合同模板
          contractTemp = 'cybContract'
        }
        if(this.productorInfo.productId == 6 || this.productorInfo.productId == 9){//分工宝合同模板
          contractTemp = 'fgbContract'
        }
        if(this.productorInfo.productId == 3 || this.productorInfo.productId == 4 || this.productorInfo.productId == 8){//用工宝合同模板
          contractTemp = 'ygbContract'
        }
        if(!contractTemp){
          alert('合同模板制作中...')
        }
        this.$card({
          name: 'ssppContranct',
          width: '800px',
          title: '合同模版',
          funCode: contractTemp,
          props: {
            binfo:this.binfo
          },
          callback: (close, str) => {
            close()
            // this.$refs.table.reload()
          }
        })
      },
      changesex(value) {
        window.sex = value
        this.binfo.sex = value
      },
      goSign() {
        if(!this.binfo.id_card || !this.binfo.name || !this.binfo.bank_account) {
          this.$message({
            message: '请检查姓名、证件号码、银行卡号是否填写！',
            showClose: true,
            type: 'error'
          });
          return false
        }
        if (!this.binfo.sex) {
          this.$message({
            message: '请选择性别',
            showClose: true,
            type: 'error'
          });
          return false
        }
        if (this.binfo.sign_status == 1) {
          // alert('您已签约')
          this.$message({
            message: '您已签约',
            type: 'success'
          });
          return false
        }
        if (!this.imgsUrl.zmurl || !this.imgsUrl.fmurl) {
          // alert('请上传身份证正反面图片');
          this.$message({
            message: '请上传身份证正反面图片',
            showClose: true,
            type: 'error'
          });
          return false
        }
        if ((this.productorInfo.productId == 7 || this.productorInfo.productId == 10) && this.appidval != 'C0B5F57CBF5EE84E3FF800190CE16B09' && this.appidval != 'B368C6B3B663B08DE84452C1E6F96FF7') {
          if (!this.imgsUrl.gsurl) {
            this.$message({
              message: '请上传工商截图',
              showClose: true,
              type: 'error'
            });
            return false;
          }
        }
        if (this.isqz == 1) {//需要手写签名
          this.signact();

        } else {//不需手写签名
          this.quickSign();
        }
      },
      quickSign() {
        this.islaodings = this.$loading({
          lock: true,
          text: '签约中,请稍后...',
          spinner: 'el-icon-loading',

        });

        //进行签名
        this.request.post('employees/savecardinfo', {
          // hand_sign: res.data,
          company_id: this.$route.query.id,
          appKey: window.appid,
          sex: window.sex,
          cmloading: true
        }).then(result => {

          var sidata = result;
          this.showDisabled = false;
          setTimeout(() => {
            this.islaodings.close()
          }, 200)

          if (sidata.code == 0) {
            this.$alert('签约成功', '提示', {
              confirmButtonText: '确定',
              type: 'warning',
              center: true
            }).then(res => {
              //alert('调转到第三方网址')

              if (this.return_url) {
                window.location.href = this.return_url;
              } else {
                // window.location.reload()
                // alert('')
                this.$router.replace({
                  path: '/authPerson',
                  query: {
                    funCode: "renzheng",
                    appKey: this.$route.query.appKey,
                    id: this.binfo.out_members_id
                  }
                })
                /*this.$message({
                    message: '回调错误',
                    type: 'error'
                });*/
              }
            })

          } else {
            alert(sidata.msg)
          }
        }, error => {
          this.islaodings.close();
          alert('签约失败。')
        })
      },
      getinfo() {

        var pid = this.$route.query.id || ''
        var sdata = this.$route.query.data || ''
        //if (!pid) return false
        if (!pid && !sdata) {
          return false;
        }

        var vdata = '';
        if (pid) {
          vdata = {id: pid, appKey: window.appid}
        }
        if (sdata) {

          // console.log(decodeURIComponent(sdata))
          // return false
          // //   console.log(sdata)
          // var x = sdata.replace(/\s+/g,"_")
          // console.log(x)
          // console.log(sdata)
          vdata = {appKey: window.appid, data: decodeURIComponent(sdata)}

//                    alert(decodeURI(sdata))
        }
        // axios.defaults.headers.common['Content-Type'] ='application/x-www-form-urlencoded;UTF-8'
        this.request.post('employees/info', vdata).then(res => {
// alert(res.code)
          if (res.code == 0) {
// alert(res.msg)
            this.canopt = true;
            this.binfo = res.data;
            this.contractId = res.contracts;
            localStorage.setItem('out_members_id', res.data.out_members_id)
            window.mid = res.data.out_members_id;
            if (res.data.zidimg) {
              this.imgsUrl.zmurl = IMG_URL + res.data.zidimg
            }
            if (res.data.fidimg) {
              this.imgsUrl.fmurl = IMG_URL + res.data.fidimg
            }
            if (res.data.industry_pic) {
              this.imgsUrl.gsurl = IMG_URL + res.data.industry_pic
            }

            // this.imgsUrl.fmurl = this.ossupUrl+res.data.fidimg
            // this.imgsUrl.gsurl = this.ossupUrl+res.data.fidimg
            window.sex = res.data.sex;
            this.msex = res.data.sex + ''
            this.getProductor();
          } else {
            this.canopt = false;
            this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',

              type: 'warning',
              center: true
            })


          }
        }, error => {
          // alert('请充失败')
          this.$alert('访问失败，请关闭后重新打开', '提示', {
            confirmButtonText: '确定',

            type: 'warning',
            center: true
          }).then(() => {
            window.history.go(-1);
          })

        })

      },

      getProductor() {
        this.request.get('employees/getProductType', {out_members_id: this.binfo.out_members_id}).then(res => {
          if (res.code == 0) {
            this.productorInfo = res;
            // alert(this.productorInfo.productId)
          } else {
            alert(res.msg)
          }
        }, error => {
          alert('获取产品失败')
        })
      },
      signact() {

        this.$promot({//用工宝签约
          name: 'qianziPc',
          width: '400px',
          title: '手写签字',
          funCode: "qianziPc",
          props: {
            signname: this.binfo.name,
            cmid: this.binfo.out_members_id,
            return_url: this.return_url
          },
          callback: (close, str) => {

            close()
            this.$router.replace({
              path: '/authPerson',
              query: {
                funCode: "renzheng",
                appKey: this.$route.query.appKey,
                id: this.binfo.out_members_id
              }
            })
            // this.$refs.table.reload()
          }
        })
      },
      openContract() {
        if(!this.contractId){
          this.$message({
            showClose: true,
            message: '合同正在生成中',
            type: 'warning'
          });
          return false;
        }
        this.request.get('employees/online', {
          appKey:window.appid,
          contracts:this.contractId.contracts

        }).then(res=>{
          if(!res.ContractUrl){
            this.$message({
              showClose: true,
              message: '合同正在生成中',
              type: 'warning'
            });
          }else{
            if(res.ContractUrl.indexOf('http')>-1){
              // location.href = res.ContractUrl
              window.open(res.ContractUrl)
            }else{
              this.$message({
                showClose: true,
                message: '合同正在生成中',
                type: 'warning'
              });
            }

          }

        },error=>{
          this.$message({
            showClose: true,
            message: '合同正在生成中',
            type: 'warning'
          });
        })

      },
      viewPro() {
        this.$card({//用工宝签约
          name: 'viewPro',
          width: '500px',
          title: '注册流程查看',
          funCode: "viewPro",
          props: {},
          callback: (close, str) => {
            close()
            // this.$refs.table.reload()
          }
        })

      },
      uploadsucess(value) {//上传回调
        // console.log(uploadsucess)
        if (value.type == 3) {//工商截图


          this.request.post('employees/saveGsImg', {
            gsUrl: value.key,
            checkUrl: IMG_URL + value.key,
            cmloading: true,
            out_members_id: this.binfo.out_members_id
          }).then((res) => {
            if (res.code == 0) {
              this.imgsUrl.gsurl = value.img
            } else {

              alert(res.msg)
              this.$refs.gsPcupload.$refs.inputer.value=''
            }
          })

        }
        if (value.type == 1) {
          this.imgsUrl.zmurl = value.img
          this.getinfo()

        }
        if (value.type == 2) {
          this.imgsUrl.fmurl = value.img
          this.getinfo()
        }


      }
    }
  }
</script>

<style lang="scss" scoped>
  .proimg {

  img {
    width: 100%;
  }

  h3 {
    font-size: 14px;

  }

  p {
    color: #999;
    padding-top: 0;
    font-size: 13px;

  label {
    color: #08F;
  }

  b {
    color: red;
  }

  }
  }
  .cardsviews {
    margin: 0 30px;
    padding: 20px 0;
    position: relative;

  .cardimgs {
    position: relative;
    overflow: hidden;

  img {
    width: 100%;
  }

  }
  .tipinfo {
    text-align: center;
    color: #999;
  }

  }
  .optbtns {
    padding: 30px;
    text-align: center;
  }

  .rzcontent {
    margin: 0 auto;
    width: 900px;
    padding: 10px;
    background: #FFF;
    min-height: 400px;
  }

</style>
